<template>
    <div class="user-list">
        <div class="condition">
            <el-input v-model="user.userNick" placeholder="用户昵称" class="condition-input"></el-input>
            <el-input v-model="user.loginCode" placeholder="登陆账号" class="condition-input"></el-input>
            <el-input v-model="user.userPhone" placeholder="用户手机号" class="condition-input"></el-input>
            <el-input v-model="user.userEmail" placeholder="用户邮箱" class="condition-input"></el-input>
            <el-select v-model="user.isSystem" placeholder="是否系统用户" class="condition-input">
                <el-option v-for="item in isSystemItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="user.userGrade" placeholder="用户等级" class="condition-input">
                <el-option v-for="item in userGradeItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-tooltip content="按条件查询"><el-button type="primary" class="sub-query" @click="queryCondition(false)">查询</el-button></el-tooltip>
            <el-tooltip content="清空条件"><el-button type="default" class="sub-query" @click="clearCondition">清空</el-button></el-tooltip>
            <el-tooltip content="新增数据"><el-button type="primary" @click="openAddBox"><i class="el-icon-plus"></i>新增</el-button></el-tooltip>
        </div>

        <el-table v-loading="loading" :data="listData" stripe border style="width: 98%;margin-left: 1%;margin-top: 15px"  :cell-style="rowClass" :header-cell-style="headClass">
            <el-table-column type="index" :index="indexMethod"> </el-table-column>
            <el-table-column prop="userNick" label="用户昵称" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="loginCode" label="登陆账号" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="userImage" label="用户头像" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <img v-if="scope.row.userImage" :src="scope.row.userImage" class="user-image"/>
                </template>
            </el-table-column>
            <el-table-column prop="userSex" label="用户性别" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.userSex=='1'">男</span>
                    <span v-if="scope.row.userSex=='2'">女</span>
                </template>
            </el-table-column>
            <el-table-column prop="userPhone" label="手机号" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="userEmail" label="邮箱" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="isSystem" label="用户类别" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.isSystem=='1'">系统用户</span>
                    <span v-if="scope.row.isSystem=='2'">普通用户</span>
                </template>
            </el-table-column>
            <el-table-column prop="userGrade" label="用户等级" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.userGrade=='1'">普通用户</span>
                    <span v-if="scope.row.userGrade=='2'">普通管理员</span>
                    <span v-if="scope.row.userGrade=='3'">超级管理员</span>
                </template>
            </el-table-column>
            <el-table-column prop="userRole" label="用户角色" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="状态" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.status=='1'" style="color: green">正常</span>
                    <span v-if="scope.row.status=='2'" style="color: red">停用</span>
                </template>
            </el-table-column>
            <el-table-column prop="createBy" label="创建者" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="createDate" label="创建时间" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column fixed="right" label="操作" width=180 style="text-align: center">
                <template slot-scope="scope">
                    <el-tooltip content="编辑"><el-button circle size="mini" type="primary" plain @click="openUpdateBox(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button></el-tooltip>
                    <el-tooltip content="启用" v-if="(scope.row.status=='2' && scope.row.userCode != 'system' )"><el-button circle size="mini" type="primary" plain @click="openTips(scope.$index,scope.row.id,1)"><i class="el-icon-circle-check"></i></el-button></el-tooltip>
                    <el-tooltip content="停用" v-if="(scope.row.status=='1' && scope.row.userCode != 'system')"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,2)"><i class="el-icon-circle-close"></i></el-button></el-tooltip>
                    <el-tooltip content="删除" v-if="scope.row.userCode != 'system'"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,3)"><i class="el-icon-delete"></i></el-button></el-tooltip>
                    <el-tooltip content="重置密码"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,4)"><i class="el-icon-refresh-left"></i></el-button></el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="操作提示" :visible.sync="updateStatus.tipsBox" width="30%">
            <span v-if="updateStatus.status == '1'">是否确认启用此条数据？</span>
            <span v-if="updateStatus.status == '2'">是否确认停用此条数据？</span>
            <span v-if="updateStatus.status == '3'">是否确认删除此条数据？</span>
            <span v-if="updateStatus.status == '4'">是否确认要重置此用户密码？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateStatus.tipsBox=false">取 消</el-button>
                <el-button type="primary"  @click="saveStatus()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="编辑数据" :visible.sync="editItemData.editDataBox" width="70%" v-if="editItemData.editDataBox"><!--关闭窗口时v-if及时销毁组件-->
            <user-form :editItemData="editItemData.rowData" @onAddSuccess="onAddSuccess" @onUpdateSuccess="onUpdateSuccess" @editDataBoxClose="editItemData.editDataBox = false"/>
        </el-dialog>


        <div class="block">
            <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange"
                           :current-page="this.user.pageNo"
                           :page-sizes="[10, 20, 40, 60]"
                           :page-size="this.user.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="this.user.total">
            </el-pagination>
        </div>


    </div>
</template>

<script>
    import userApi from '@/api/user/userApi'
    import userForm from "./UserForm";
    export default {
        name: "UserList",
        components:{
            userForm
        },
        data(){
            return{
                loading:true,  //请求加载
                updateStatus:{  //修改状态
                    tipsBox:false,
                    index:'',
                    id:'',
                    status:'',
                },
                editItemData:{ // 添加或编辑
                    index:'',
                    rowData:'',
                    editDataBox:false,
                },
                listData:[],  //表格数据
                user:{   //查询条件
                    id:'',
                    userCode:'',
                    password:'',
                    userNick:'',
                    loginCode:'',
                    userImage:'',
                    userSex:'',
                    userPhone:'',
                    userEmail:'',
                    isSystem:'',
                    userGrade:'',
                    sort:'',
                    status: '',
                    pageNo:1,
                    pageSize:20,
                    total:0,
                },
                userSexItem:[{value:"1", label: '男'},{value:"2", label: '女'}],
                isSystemItem:[{value:"1",label:"系统用户"},{value:"2",label:"普通用户"}],
                userGradeItem:[{value:"1",label:"普通用户"},{value:"2",label:"普通管理员"},{value:"3",label:"超级管理员"}]
            }
        },
        methods:{
            indexMethod(i){
                return i+1
            },
            headClass () {
                return 'text-align: center;background:#eef1f6;'
            },
            rowClass () {
                return 'text-align: center;'
            },
            async pageSizeChange(val){
                this.user.pageSize = val
                this.queryCondition(true);
            },
            async pageNoChange(val){
                this.user.pageNo = val
                this.queryCondition(true);
            },
            async queryCondition(isPage){
                if (!isPage){
                    this.user.pageNo=1
                }
                this.loading = true
                const res = await userApi.getList(this.user)
                if (res.code == '200'){
                    this.user.total = res.data.total
                    this.listData = res.data.records
                    this.loading = false;
                }else{
                    this.$message.error(res.msg)
                }
            },
            openTips(index,id,status){
                this.updateStatus.index = index
                this.updateStatus.id = id
                this.updateStatus.status = status
                this.updateStatus.tipsBox = true
            },
            openUpdateBox(index,row){
                this.editItemData.index = index
                this.editItemData.rowData = row
                this.editItemData.editDataBox = true
            },
            openAddBox(){
                this.editItemData.index = ''
                this.editItemData.rowData = ''
                this.editItemData.editDataBox = true
            },
            async saveStatus(){
                this.updateStatus.tipsBox=false
                let res = '';
                if (this.updateStatus.status == '4'){
                     res = await userApi.initPwd(this.updateStatus.id)
                }else {
                    res = await userApi.saveStatus(this.updateStatus.id,this.updateStatus.status)
                }
                if (res.code == '200'){
                    this.$message.success("操作成功")
                    if (this.updateStatus.status == '1'){
                        this.listData[this.updateStatus.index].status = 1
                    }
                    if (this.updateStatus.status == '2'){
                        this.listData[this.updateStatus.index].status = 2
                    }
                    if (this.updateStatus.status == '3'){
                        this.listData.splice(this.updateStatus.index,1)
                    }
                    if (this.updateStatus.status == '4'){
                        this.$message.success("密码重置成功")
                    }
                }
            },
            onUpdateSuccess(res){
                this.listData[this.editItemData.index] = res
                this.editItemData.editDataBox = false;
                this.$message.success("保存成功")

            },
            onAddSuccess(res){
                if (this.listData.length < this.user.pageSize){
                    this.listData.splice(0,0,res)
                    this.user.total=this.user.total+1
                }
                this.editItemData.editDataBox = false;
                this.$message.success("保存成功")
            },
            clearCondition(){
                this.user.userNick='';
                this.user.loginCode = '';
                this.user.userPhone='';
                this.user.userEmail='';
                this.user.isSystem='';
                this.user.userGrade='';
            }
        },
         created:async function (){
            const res = await userApi.getList(this.user)
             if (res.code == '200'){
                 this.user.total = res.data.total
                 this.listData = res.data.records
                 this.loading = false;
             }else{
                 this.$message.error(res.msg)
             }
        }
    }
</script>

<style scoped>
    .user-image{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
    }
</style>